<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!--
el-pagination  
    total:总数
    current-page:当前多少页
    page-sizes:页容量选项
    page-size:当前页容量(对应page-sizes的值),保证该值在page-sizes里面存在
    layout="total, sizes, prev, pager, next, jumper"
    current-change:页码改变
    size-change:页容量改变
        -->
      <el-pagination
        :total="pagination.total"
        :current-page="pagination.currentPage"
        :page-sizes="[1, 10, 20, 30]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            pagination: {
              total: 10,
              currentPage: 1,
              pageSize: 1,
            },
          };
        },
        methods: {
          // 页码改变
          handleCurrentChange(page) {
            //page当前改变后的页码
            window.console.log(page);
          },
          //页容量改变
          handleSizeChange(size) {
            //size改变后的页容量
            window.console.log(size);
          },
        },
      });
    </script>
  </body>
</html>
